<template>
    <div class="treeWrapper">
        <el-tabs v-model="activeName" type="card" @tab-click="handleChangeTabs">
            <el-tab-pane label="中压" name="zy">
                <TreeItem v-if="activeName == 'zy'" :propData="activeName" @handleClickTreeNodeItem="handleClickTreeNodeItem"></TreeItem>
            </el-tab-pane>
            <el-tab-pane label="高压" name="gy">
                <TreeItem v-if="activeName == 'gy'" :propData="activeName" @handleClickTreeNodeItem="handleClickTreeNodeItem"></TreeItem>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import TreeItem from './TreeItem.vue';
export default {
    data() {
        return {
            activeName: 'zy',
            tableObj: {
                tdjsmLike: '',
                jsflLike: '',
                activeName: ''
            }
        }
    },
    components: {
        TreeItem
    },
    methods: {
        handleChangeTabs(tab) {
            const that = this
            that.activeName = tab.name
            let tableObj = {
                tdjsmLike: '',
                jsflLike: '',
                activeName: tab.name
            }
            that.tableObj = JSON.parse(JSON.stringify(tableObj))
            that.$emit("handleClickTreeNode", tableObj)
        },
        handleClickTreeNodeItem(obj) {
            const that = this
            let tableObj = {}
            if (that.activeName == 'zy') {
                tableObj = {
                    tdjsmLike: obj.tdjsmLike,
                    jsflLike: '',
                    activeName: obj.activeName
                }
            } else {
                tableObj = {
                    tdjsmLike: '',
                    jsflLike: obj.jsflLike,
                    activeName: obj.activeName
                }
            }
            that.tableObj = JSON.parse(JSON.stringify(tableObj))
            that.$emit("handleClickTreeNode", tableObj)
        }
    }
}
</script>
<style lang='scss' scoped>
.treeWrapper {
    height: 100%;
}
.treeWrapper /deep/ .el-tabs {
    height: 100%;
}
.treeWrapper /deep/ .el-tabs__content {
    width: 100%;
    height: calc(100% - 56px);
    overflow: auto;
}
</style>
